<template>
	<view>
		<view class="rider_list">
			<view 
				class="rider_item"
				v-for="(it_r,in_r) in riderPersionList"
				:key="in_r"
				@click="handleChooseRider(it_r)"
			>
				<view class="l-wrap">
					<view v-if="!it_r.choosed" class="icon" ><image src="@/static/imgs/icons/choose0-icon.png" mode="aspectFill"></image></view>
					<view v-else class="icon" ><image src="@/static/imgs/icons/choose1-icon.png" mode="aspectFill"></image></view>
					<text class="name ellispsis1">{{it_r.name}}</text>
					<!-- <text class="type">{{it_r.type}}</text> -->
					<text class="ID">{{it_r.phone}}</text>
				</view>
				<view class="edit-icon" @click="handleGoBusAddRider(it_r)"><image src="@/static/imgs/icons/edit-icon.png" mode="aspectFill"></image></view>
			</view>
		</view>
		
		<view class="confirm-btn-wrap">
			<view class="confirm-btn tp-w690">
				<view class="btn add" @click="handleGoBusAddRider">添加驾驶员</view>
				<view class="btn confirm" @click="handleConfirmChoosedRider">确定</view>
				<view class="btn del" @click="handleDelChoosedRider">删除</view>
			</view>
		</view>
		
		<uni-popup ref="modalBox" :maskClick="false" type="center">
			<view class="modal_box-wrap">
				<view class="alert-icon"><image src="@/static/imgs/icons/alert-icon.png" mode=""></image></view>
				<view class="p">是否确认删除？</view>
				<view class="btns-wrap">
					<view class="btn cancel" @click="handleCloseModalBox">取消</view>
					<view class="btn confirm" @click="handleConfirm">确认</view>
				</view>
				<uni-icons @click="handleCloseModalBox" class="close-icon" type="close" size="30" color="#999"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				riderPersionList: [],
				curRiderPersonInfo: {}
			};
		},
		onLoad(opt) {
			uni.showLoading({
				title: '加载中'
			});
		},
		onShow() {
			this.getRiderList()
		},
		methods: {
			getRiderList() { // onshow 获取乘客完整信息
				this.$http.post(this.$api.getRentDriverList).then(res => {
					if (res.code === 200) {
						res.data.map(item => {
							item.choosed = false
						})
						this.riderPersionList = res.data
						this.updateRiderList()
					}
				})
				
			},
			handleChooseRider(item) {
				// if (!item.ID) {
				// 	uni.showToast({
				// 		title: '请完善驾驶员信息',
				// 		icon: 'none'
				// 	})
				// 	setTimeout(() => {
				// 		this.handleGoBusAddRider(item)
				// 	}, 1500)
				// 	return 
				// }
				return item.choosed = !item.choosed
			},
			handleGoBusAddRider(item) {
				uni.navigateTo({
					url: './addPilot?id=' + item.id
				});
			},
			handleConfirmChoosedRider() {
				this.riderPersionList.forEach((item,index) => {
					if(item.choosed) {
						this.$store.commit('upRiderList', item)
					}
				})
				uni.navigateBack({delta: 1});
			},
			handleDelChoosedRider() {
				this.$refs.modalBox.open()
			},
			handleConfirm() {
				let arr = []
				this.riderPersionList.forEach(item => {
					if (item.choosed) {
						arr.push(item.id)
					}
				})
				const ids = arr.join()
				this.$http.get(this.$api.delDriver, {id: ids}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功'
						})
						this.getDriverList()
						this.handleCloseModalBox()
					}
				})
			},
			updateRiderList() {
				const storage = this.$store.getters.getRiderList
				const arr = this.riderPersionList
				storage.forEach((it_s,in_s) => {
					arr.forEach((it_a,in_a) => {
						if (it_a.id==it_s.id) {
							console.log(it_a);
							it_a.choosed = true
						}
					})
				})
				uni.hideLoading()
			},
			handleCloseModalBox() {
				this.$refs.modalBox.close()
			},
			getDriverList() { // 获取驾驶员列表
				this.$http.post(this.$api.getRentDriverList).then(res => {
					if (res.code === 200) {
						this.riderPersionList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
/deep/.input-placeholder {
	font-size: 30rpx;
	font-weight: normal;
	color: #ccc;
}
.rider_list {
	width: 690rpx;
	margin: 20rpx auto 98rpx;
	border-radius: 12rpx;
	background-color: #fff;
	overflow: hidden;
	.rider_item {
		height: 100rpx;
		display: flex;
		margin: 0 30rpx;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #ebebeb;
		&:last-child {
			border-bottom: none;
		}
		.l-wrap {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			.name {
				font-size: 30rpx;
				padding: 0 10rpx 0 20rpx;
				width: 120rpx;
			}
			.type {
				padding-right: 40rpx;
			}
			.icon {
				display: inline-block;
				height: 30rpx;
				width: 30rpx;
			}
		}
	}
}
.confirm-btn-wrap {
	height: 98rpx;
	background-color: #fff;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	.confirm-btn {
		display: flex;
		justify-content: space-between;
		.btn {
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			width: 214rpx;
			margin:13rpx auto;
			color: #fff;
			font-size: 32rpx;
			border-radius: 12rpx;
			&.confirm {
				background-color: $blue;
			}
			&.add {
				background-color: $yellow;
			}
			&.del {
				border: 1px solid $red;
				color: $red;
			}
		}
	}
}

.modal_box-wrap {
	background-color: #fff;
	width:582rpx;
	border-radius:20rpx;
	padding: 80rpx 60rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	position: relative;
	.alert-icon {
		width: 118rpx;
		height: 138rpx;
	}
	.p {
		padding: 40rpx 0 60rpx;
		font-size: 30rpx;
	}
	.btns-wrap {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.btn {
			width:218rpx;
			height:73rpx;
			line-height: 73rpx;
			text-align: center;
			border-radius:37px;
			font-size: 28rpx;
			&.cancel {
				border:1px solid #ccc;
				color: #ccc;
			}
			&.confirm {
				background-color: $blue;
				color: #fff;
			}
		}
	}
	.close-icon {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		z-index: 2;
	}
}
</style>
